import React, { Component } from 'react';
import BScroll from 'better-scroll';

function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {
  	// eslint-disable-next-line no-redeclare
  	var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  else
  {
  	// eslint-disable-next-line no-redeclare
  	var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight*0.2;
}
var height = getClientHeight()   //视口高度

export default class App extends Component {
  state = {
      list:[]
  }
  setList(){
    var datalist = ['111','223','333','444','555','666','777','888','999','000'];
    this.setState({
        list:datalist
    })
  }
  componentDidUpdate(){   //成功渲染真实Dom后触发
      new BScroll('.wrapper',{
          scrollbar:true
      });
  }
  render() {     //render生命周期（自动执行）
    return (
        <div>
            <button onClick={()=> this.setList()}>click</button>
            <div className="wrapper" style={{height:height,backgroundColor:'red', overflow:'hidden'}}> 
                <ul className="content"> 
                    {
                        this.state.list.map(item =>
                            <li key={item}>{item}</li>
                        )
                    }
                </ul>
            </div>
        </div>
    )
  }
}
